<template>
  <div class="demo">
    <!-- 其他区域 -->
    <div class="no-spy-content">
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
      我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容 我们是无需监听的内容
    </div>
    <!-- 需要监听侧边栏的区域 -->
    <div class="others">
      <div
        class="container"
        style="  background-color: #eee;"
        v-for="item in navLists"
        :key="item"
      >
        {{ item }}
      </div>
      <appsideNavBar :navLists="navLists"></appsideNavBar>
    </div>

    <!-- 其他区域 -->
    <div style="height:500px"></div>
  </div>
</template>

<script>
import appsideNavBar from "./appsideNavBar.vue";
export default {
  components: {
    appsideNavBar,
  },
  data() {
    return {
      //nav栏的文字
      navLists: ["标题1", "标题2", "标题3", "标题4", "标题5"],
    };
  },
};
</script>

<style scoped>
.no-spy-content {
  width: 85%;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 50px;
  transform: translate(-20%, 0);
}
.container {
  width: 85%;
  height: 600px;
  font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  transform: translate(-20%, 0);
}
</style>

